import React, { Component } from 'react'
import {ThemeContext} from './Context'

class Right extends Component {
    render() {
        console.log(this)
        return (
            <div>
                <ThemeContext.Consumer>
                    {//哪个组件用到context就在哪个组件外层加consumer，其他组件不需要加
                    //将value中的color属性解构出来↓
                        ({color})=>
                            <h1 style={{color}}>Right</h1>
                    }
                    {/* {(value)=>
                        <h1 style={{color:value.color}}>Right</h1>
                    } */}
                </ThemeContext.Consumer>
                <nav style={{color:this.context.color}}>context</nav>
                <div>
                    other
                </div>
            </div>
        )
    }
}
Right.contextType = ThemeContext;//给Right的context属性添加ThemeContext，若Right是函数组件，则不能使用该方法添加，因为函数组件没有静态属性

export default Right;